<template>
  <div class="index">
    <div class="header">
      <div class="logo">
        <span class="iconfont iconnew"></span>
      </div>
      <div class="search" @click="$router.push({ name: 'search' })">
        <van-icon name="search" />
        <span>搜索商品</span>
      </div>
      <div class="user" @click="$router.push({ path: `/personal/1` })">
        <van-icon name="manager-o" />
      </div>
    </div>
    <!-- 当前被激活的标签项的索引 -->
    <van-tabs v-model="active" sticky swipeable>
      <!-- 单击标签项及内容面板 -->
      <!-- 生成栏目数据 -->
      <van-tab
        v-for="(value, index) in cateList"
        :key="index"
        :title="value.name"
      >
        <!-- <articleblock
          v-for="(v, i) in value.postList"
          :key="i"
          :post="v"
        ></articleblock> -->

        <van-list
          v-model="value.loading"
          :finished="value.finished"
          finished-text="没有更多了"
          @load="onLoad"
          :immediate-check="false"
          :offset="10"
        >
          <!-- 下拉更新 -->
          <van-pull-refresh v-model="value.isLoading" @refresh="onRefresh">
            <articleblock
              v-for="(v, i) in value.postList"
              :key="i"
              :post="v"
            ></articleblock>
          </van-pull-refresh>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>


<script>
import { getCateList } from "@/apis/category.js";
import { getArticleList } from "@/apis/article.js";
import articleblock from "@/components/articleblock.vue";
export default {
  data() {
    return {
      id: "-1",
      active: localStorage.getItem("token") ? 1 : 0,
      cateList: [],
    };
  },
  components: {
    articleblock,
  },
  methods: {
    //下拉帅新的触发事件
    onRefresh() {
      // 下拉刷新所需要做的事情
      // 页码重置 为1   +  数据清空 + 重置finished +  重置isloading
      // 1.充值页码到1
      this.cateList[this.active].pageIndex = 1;
      // 2.数据清空
      this.cateList[this.active].postList.length = 0;
      // 3.发起数据请求-- 异步请求
      // setTimeout(() => {
      //   this.init();
      // }, 2000);
      // 4。将fffinishd重置为false，以便可以继续的上拉加载
      this.cateList[this.active].finished = false;
      // console.log(2);
      this.init();
    },
    // 上拉下载更多数据
    onLoad() {
      this.cateList[this.active].pageIndex++;
      // console.log(3);
      // setTimeout(() => {
      //   this.init();
      // }, 2000);
      this.init();
    },
    async init() {
      let list = await getArticleList({
        //  postList:[],// 这个栏目的新闻列表数据
        // pageSize:10,//这个栏目每页所显示的记录数
        // pageIndex:1 // 这个栏目 当前的页码

        // 获取默认栏目的新闻数据，并动态渲染
        // this.cateList[this.active]:就是当前的默认栏目
        category: this.cateList[this.active].id,
        pageSize: this.cateList[this.active].pageSize,
        pageIndex: this.cateList[this.active].pageIndex,
      });
      // 将数据存储到当前栏目的postList中
      this.cateList[this.active].postList.push(...list.data.data);
      // 将上拉加载组件的loading重置为false,如果没有重置为False,则不能再进行上拉加载了，因为上一次的加载还没有完成
      this.cateList[this.active].loading = false;
      // 重置下拉刷新
      this.cateList[this.active].isLoading = false;
      // 如果没有数据了，就应该将上拉组件的finished重置为true
      // 没有数据的判断是：这次获取的数据的条数小于pageSize
      if (list.data.data.length < this.cateList[this.active].pageSize) {
        this.cateList[this.active].finished = true;
      }
      console.log(this.list);
    },
  },
  watch: {
    active() {
      // console.log(this.active);
      console.log(3);
      //需要重新加载当前的栏目数据
      //需要注意的细节：只有当前栏目没有文章数据的时候我们才需要重新加载数据，否则直接展示
      if (this.cateList[this.active].postList.length == 0) {
        this.init();
      }
    },
  },
  async mounted() {
    this.id = JSON.parse(localStorage.getItem("token_info")).id;
    // console.log(JSON.parse(localStorage.getItem("token_info")));

    // 获取所有栏目分类数据
    // console.log(this.id);
    // let result = await getCateList();
    // console.log(result);
    // this.cateList = result.data.data;
    // 获取所有栏目分类数据,首先得判断是否有本地存储，如果有则从本地存储中获取栏目数据，如果没有则发起axios请求
    if (localStorage.getItem("heimatoutiao_exsists_cate_56")) {
      this.cateList = JSON.parse(
        localStorage.getItem("heimatoutiao_exsists_cate_56")
      );
      // 细节说明，我们的栏目的本地存储数据中没有关注和头条，所以我们得根据用户登陆状态动态添加关注和头条
      if (localStorage.getItem("token_info")) {
        this.cateList.unshift(
          { id: 0, name: "关注", is_top: 1 },
          { id: 999, name: "头条", is_top: 1 }
        );
      } else {
        this.cateList.unshift({ id: 999, name: "头条", is_top: 1 });
      }
    } else {
      let result = await getCateList();
      this.cateList = result.data.data;
    }

    //对栏目数据进行改造，以满足当前页面的业务需求
    //具体的改造有：添加一个而数据用于存储当前拉暗牧的文章列表数据

    this.cateList = this.cateList.map((v) => {
      return {
        ...v,
        postList: [], // 当前栏目的文章列表
        pageIndex: 1, // 当前栏目的页码
        pageSize: 5, // 当前栏目每页所展示的数据的条数
        loading: false, // 这个栏目的加载状态
        finished: false, // 这个栏目的数据是否完全加载完毕
        isLoading: false, // 这个栏目是否正在下拉刷新
      };
    });
    this.init();

    //获取默认栏目（头条） 新闻数据
    // let list = await getArticleList({
    //   category: [this.active].id,
    //   pageSize: [this.active].pageSize,
    //   pageIndex: [this.active].pageIndex,
    // });
    // console.log(list);
    //将获取到的文章列表数据存储到前的栏目中
    // this.cateList[this.active].postList = list.data.data;
    // console.log(this.cateList);
    // console.log(this.postList);
    document.querySelector(".van-sticky").onclick = (e) => {
      if (e.target.className == "van-sticky") {
        this.$router.push({ path: "/cateManager" });
      }
    };
  },
};
</script>


<style lang="less" scoped>
/deep/ .van-sticky {
  padding-right: 50px;
  &::after {
    content: "+";
    position: absolute;
    width: 51px;
    height: 44px;
    background-color: #fff;
    top: 0;
    right: 0;
    text-align: center;
    line-height: 42px;
    font-size: 35px;
  }
}
.index {
  .header {
    height: 40px;
    display: flex;
    justify-content: space-between;
    background-color: #f00;
    align-items: center;
    color: #fff;
  }
  .search {
    flex: 1;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 15px;
    text-align: center;
    line-height: 30px;
    .van-icon {
      font-size: 16px;
    }
  }
  .van-icon {
    font-size: 24px;
    padding: 0 10px;
  }
  .iconfont {
    font-size: 50px;
    padding: 0 10px;
  }
}
</style>
